import Link from 'next/link'
import { LucideIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'

interface ToolCardProps {
  tool: {
    id: string
    name: string
    description: string
    category: string
    icon: LucideIcon
    href: string
  }
}

export function ToolCard({ tool }: ToolCardProps) {
  const Icon = tool.icon
  
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow">
      <div className="flex items-center mb-4">
        <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
          <Icon className="w-5 h-5 text-blue-600" />
        </div>
        <div>
          <h3 className="font-semibold text-gray-900">{tool.name}</h3>
          <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
            {tool.category}
          </span>
        </div>
      </div>
      
      <p className="text-gray-600 text-sm mb-4 line-clamp-2">
        {tool.description}
      </p>
      
      <Button asChild className="w-full">
        <Link href={tool.href}>
          使用工具
        </Link>
      </Button>
    </div>
  )
}